<template>
  <div>
    <div class="d1">
      <p>父组件展示：{{state.age}}</p>
      <button @click="add">添加</button>
    </div>
    <div class="d1">
      <Index :age="state.age" @addCallback="addCallback"></Index>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
import Index from '../../components/sanDianEr/组件通信/index.vue'
let state = reactive({
  age: 1
})
let add = () => {
  state.age++
}
let addCallback = (cb) => {
  state.age = cb
}

</script>
<style scoped lang ='less'>
.d1 {
  height: 200px;
  width: 80%;
  margin: 10px auto;
  border: 1px solid #000;
  text-align: center;
}
</style>